<template>
  <div
    :class="{'bg-stars-content':isbig}"
    class="stars-content">
    <div
      :style="'width:' + getWidth + '%'"
      class="stars-active-content">
      <span
        v-for="index in 5"
        :key="index"
        :class="{'bg-ac-img':isbig}"
        class="ac-img"
        @click="setStarsValue(index)"/>
    </div>
    <div class="stars-backgound-content">
      <span
        v-for="index in 5"
        :key="index"
        :class="{'bg-ac-img':isbig}"
        class="bg-img"
        @click="setStarsValue(index)"/>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    value: {
      type: Number,
      default: function () { return 0 }
    },
    disable: {
      type: Boolean,
      default: function () { return true }
    },
    isbig: {
      type: Boolean,
      default: function () { return false }
    }
  },
  data () {
    return {}
  },
  computed: {
    getWidth () {
      return this.value / 0.05
    }
  },
  mounted () {},
  methods: {
    setStarsValue (index) {
      if (this.disable) {
        return
      }
      this.$emit('input', index)
    }
  }
}
</script>
<style lang='less' scoped>
.stars-content {
  display: flex;
  height: 1.6rem;
  min-width: 8rem;
  overflow: hidden;
  position: relative;
}
.bg-stars-content {
  display: flex;
  height: 1.6rem;
  min-width: 16rem;
  overflow: hidden;
  position: relative;
}
.stars-active {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  height: 1.6rem;
}
.stars-backgound-content,
.stars-active-content {
  position: absolute;
  display: inline-block;
  overflow: hidden;
  height: 1.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stars-backgound-content span,
.stars-active-content span {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
}
.ac-img {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: contain;
}
.bg-img {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: contain;
}
.bg-ac-img{
  margin-right: 2rem;
}
.stars-active-content {
  z-index: 1;
}
</style>
